<template>
  <div class="relative" style="height: 100%; overflow: hidden">
    <el-menu
      :default-active="$route.path"
      :router="true"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="menuSelect"
    >
      <el-menu-item index="/home">
        <el-icon><House /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-menu-item index="/literatureReading">
        <el-icon><Reading /></el-icon>
        <template #title>文献阅读</template>
      </el-menu-item>
      <el-menu-item index="/batchReading">
        <el-icon><Files /></el-icon>
        <template #title>批量阅读</template>
      </el-menu-item>
      <el-menu-item index="/translationReading">
        <el-icon><Document /></el-icon>
        <template #title>文献翻译</template>
      </el-menu-item>
      <div class="menu-title" v-if="!isCollapse">历史</div>
      <el-menu-item index="/record">
        <el-icon><Clock /></el-icon>
        <template #title>历史记录</template>
      </el-menu-item>
    </el-menu>
    <!-- <div class="date-content" v-if="!isCollapse">
      <div style="font-weight: 500;margin-bottom: 5px;">会员有效期：</div>
      <div style="color: oklch(.552 .016 285.938);font-size: 14px" v-if="valid">
        {{remainTime}}
      </div>
      <div style="color: oklch(.552 .016 285.938);font-size: 14px" v-else>
        已过期
      </div>
    </div> -->
    
    <div class="code-content" v-if="!isCollapse">
      <div style="text-align: center; margin-bottom: 16px; padding: 16px 0;" >
      <img :src="qrcodeImage" alt="二维码" style="width: 240px; height: 240px; object-fit: contain; display: block; margin: 0 auto;" />
    </div>
      <div style="font-weight: 500;margin-bottom: 5px;">立即兑换，解锁科研利器</div>
      <div style="font-size: 12px;margin-bottom: 16px;">解锁智能综述生成，自动梳理领域脉络，告别手工拼接。</div>
      <div class="code-btn-content">
        <el-button class="code-btn" @click="codeGet">获取积分</el-button>
        <el-button class="code-btn" @click="codeDialog">立即兑换</el-button>
      </div>
      
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="兑换码"
      width="300"
      destroy-on-close
      align-center
      @close="clearCode"
    >
      <el-input class="code-input" v-model="codeTxt" placeholder="请输入兑换码" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button class="confirm-btn" @click="confirmCode">
            立即兑换
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import { watch, ref, onMounted } from 'vue'
  import qrcodeImage from '@/assets/qrcode.png';
  import { useRouter, useRoute } from 'vue-router'
  import { codeRedeem } from '@/api/user'
  import { ElMessage } from 'element-plus'

  const emit = defineEmits(["updatePoint"])
  const props = defineProps(['isCollapse']) 

  const router = useRouter();
  const route = useRoute();

  const codeLink = 'https://sci-translate.top/aipaper/member/index.html';

  const remainTime = ref('');

  const dialogVisible = ref(false);
  const codeTxt = ref(null);

  const menuSelect = (e) => {
    router.push(e)
  }

  const codeDialog = () => {
    dialogVisible.value = true;
  }

  const clearCode = () => {
    codeTxt.value = null;
  }

  const confirmCode = async () => {
    if (!codeTxt.value) {
      ElMessage.error('请输入兑换码');
    } else {
      const params = {
        code: codeTxt.value,
        userId: JSON.parse(localStorage.getItem('userInfo')).id
      }
      let res = await codeRedeem(params)
      if(res.code == 200){
        ElMessage.success('兑换成功');
        dialogVisible.value = false;
        emit('updatePoint')
      } else {
        ElMessage.error('兑换失败，请联系客服');
        dialogVisible.value = false;
      }
    }
  }

  const codeGet = () => {
    window.open(codeLink, '_blank')
  }
</script>
<style scoped>
.el-menu {
  border-right: 1px solid var(--border);
}
.el-menu-vertical-demo {
  height: 100%;
  /* background: var(--sidebar-bg); */
  background: var(--background);
  padding: 16px 0;
}
.el-menu-vertical-demo .el-menu-item {
  border-radius: 10px;
  height: 46px;
  color: var(--txt-color);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  padding: 16px;
}
.el-menu-vertical-demo .el-menu-item:hover {
  background: var(--menu-background);
}
.el-menu-vertical-demo .el-menu-item.is-active {
  color: var(--txt-color);
  background: var(--menu-background);
}
.el-menu-vertical-demo .el-menu-item:hover .el-icon {
  rotate: 12deg;
  transition-duration: 0.2s
}
.menu-title {
  font-size: 12px;
  color: var(--txt-color);
  padding-left: 20px;
  margin-top: 30px;
}
.code-content {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 218px;
  border-radius: 10px;
  border: 1px solid var(--item-border);
  padding: 16px;
  box-sizing: border-box;
  background: var(--menu-background);
  color: var(--txt-color);
}
.date-content {
  position: absolute;
  bottom: 177px;
  left: 16px;
  width: 218px;
  border-radius: 10px;
  border: 1px solid var(--item-border);
  padding: 16px;
  box-sizing: border-box;
  background: var(--menu-background);
  color: var(--txt-color);
}
.code-btn-content {
  display: flex;
  justify-content: space-between
}
.code-btn {
  width: 48%;
  height: 32px;
  border-radius: 10px;
  color: var(--button-text-color);
  background-color: var(--button-bg-color);
  border-color: var(--button-bg-color);
  margin-left: 0 !important;
}
.code-btn:hover, .confirm-btn:hover {
  background-color: var(--button-hover-bg-color);
  border-color: var(--button-hover-border-color);
  color: var(--button-text-color);
}
.confirm-btn {
  color: var(--button-text-color);
  background-color: var(--button-bg-color);
  border-color: var(--button-bg-color);
}
::v-deep .el-overlay {
  background: var(--dialog-bg);
}
::v-deep .el-dialog__title {
  color: var(--txt-color);
}
::v-deep .el-dialog {
  background: var(--background);
  border: 1px solid var(--border);
}
</style>
